<template>
    <!--搜索设备对话框-->
    <div id="dialogSeach">
      <div class="weui-mask"></div>
      <div class="weui-dialog" style="width: 100%;max-width: 100%;">
        <div class="weui-dialog__bd">
          <div class="top">
            <label><i class="icon iconfont">&#xe7d8;</i><span class="color-9">型号</span></label>
            <input type="text" placeholder="请输入型号" v-model="modelType">
          </div>
          <div class="time" v-if="item!==3">
            <label v-show="item===1"><i class="icon iconfont" >&#xe641;</i><span class="color-9">投运发生时间</span></label>
            <label v-show="item===2"><i class="icon iconfont" >&#xe641;</i><span class="color-9">故障发生时间</span></label>
            <div class="input-time">
              <div class="box" @click="timeChoose('firstTime')">
                <i class="icon iconfont">&#xe641;</i>
                <span class="date">{{ firstTime }}</span>
              </div>
              <span>至</span>
              <div class="box"  @click="timeChoose('endTime')">
                <i class="icon iconfont">&#xe641;</i>
                <span class="date">{{ endTime }}</span>
              </div>
            </div>
          </div>
          <div class="deviceType">
            <label><i class="icon iconfont">&#xe63b;</i><span class="color-9">设备类型</span></label>
            <div class="deviceTypeBox">
              <div class="device" @click="tabDevice(3)">
                <div class="img-log">
                  <p v-show="deviceChoose==3"></p>
                </div>
                <span>全部</span>
              </div>
              <div class="device" @click="tabDevice(1)">
                <div class="img-log">
                  <p v-show="deviceChoose==1"></p>
                </div>
                <span>洗衣机</span>
              </div>
              <div class="device" @click="tabDevice(2)">
                <div class="img-log">
                  <p v-show="deviceChoose==2"></p>
                </div>
                <span>烘干机</span>
              </div>
            </div>
          </div>
        </div>
        <div class="weui-dialog__ft">
          <div class=" bg-2f color-f" @click="queryClick()">
            <i class="icon iconfont">&#xe62b;</i>
            查询
          </div>
        </div>
      </div>
    </div>
</template>
<script>
  import * as api from 'api';
  export default {
    props: ['item'],
    data () {
      return {
        deviceChoose: 3,
        firstTime: '',
        endTime: '',
        deviceId: '',
        deviceStatus: 1,
        modelType: '',
        device: '',
        deviceTypeId: ''
      }
    },
    methods: {
      // 搜索弹窗，设备选择切换
      tabDevice (index) {
        this.deviceChoose = index;
        if (index === 1) {
          this.device = '洗衣机'
          this.deviceTypeId = 1
        }
        if (index === 2) {
          this.device = '烘干机'
          this.deviceTypeId = 2
        }
        if (index === 3) {
          this.device = ''
          this.deviceTypeId = ''
        }
      },
      // 搜索弹窗，时间选择
      timeChoose (date) {
        var that = this
        weui.datePicker({
          start: 2017,
          end: (new Date()).getFullYear(),
          defaultValue: [new Date().getFullYear(), (new Date().getMonth() + 1), new Date().getDate()],
          onChange: function (result) {
          },
          onConfirm: function (result) {
            if (date === 'firstTime') {
              that.firstTime = result[0] + '-' + result[1] + '-' + result[2]
              console.log(that.firstTime)
            }
            if (date === 'endTime') {
              that.endTime = result[0] + '-' + result[1] + '-' + result[2]
              console.log(that.endTime)
            }
          },
          id: 'datePicker'
        })
      },
      // 搜索弹窗，查询
      queryClick () {
        this.$emit('seachChild1', false)
        this.seachShow = false;
        api.queryDeviceInfo({
          agencyId: this.$store.state.userInfo.id,
          flags: 1,
          deviceTypeId: this.device === '洗衣机' ? 1 : this.device === '烘干机' ? 2 : '',
          modelName: this.modelType,
          startTime: this.firstTime,
          endTime: this.endTime,
          deviceStatus: this.item === 1 ? 1 : this.item === 2 ? 2 : this.item === 3 ? 3 : ''
        })
          .then(res => {
            res.resultData.forEach((item, index) => {
              if (item.bindTime) {
                item.bindTime = item.bindTime.slice(0, 10);
              }
              if (item.constructTime) {
                item.constructTime = item.constructTime.slice(0, 10)
              }
              if (item.errorTime) {
                item.errorTime = item.errorTime.slice(0, 10)
              }
              if (item.quitTime) {
                item.quitTime = item.quitTime.slice(0, 10)
              }
            })
            let list = res.resultData
            this.$emit('seachChild2', [list, this.deviceTypeId, this.modelType, this.firstTime, this.endTime])
            this.modelType = '';
            this.firstTime = '';
            this.endTime = '';
          })
      }
    },
    created () {
    }
  }
</script>
